<template>
  <div class="NavMenu">
<!--    <div class="logo">-->
<!--      LOGO-->
<!--    </div>-->
<!--    <ul class="navigation">-->
<!--      <router-link to="/">-->
<!--        <li>Main</li>-->
<!--      </router-link>-->
<!--      <router-link to="/about">-->
<!--        <li>About</li>-->
<!--      </router-link>-->
<!--      <router-link to="/contacts">-->
<!--        <li>Contacts</li>-->
<!--      </router-link>-->
<!--      <router-link to="/faq">-->
<!--        <li>FAQ</li>-->
<!--      </router-link>-->
<!--      <router-link to="/cabinet">-->
<!--        <li>Cabinet</li>-->
<!--      </router-link>-->
<!--    </ul>-->
<!--    <div class="login">-->
<!--      <input type="button" @click.prevent value="">-->
<!--    </div>-->
    <ul class="flex nav nav-pills nav-fill">
      <li class="nav-item">
        <router-link class="nav-link active" aria-current="page" to="/">
          Активная
        </router-link>
      </li>
      <li class="nav-item">
        <router-link class="nav-link active" aria-current="page" to="/about">
          Активная
        </router-link>
      </li>
      <li class="nav-item">
        <router-link class="nav-link active" aria-current="page" to="/">
          Активная
        </router-link>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Ссылка</a>
      </li>
      <li class="nav-item">
        <a class="nav-link">Отключенная</a>
      </li>
    </ul>
  </div>
</template>
<script setup>

</script>
<style lang="scss" scoped>
.NavMenu {
  width: 100%;
  height: 55px;
  display: flex;
  justify-content: space-evenly;
  align-items: center;

  .flex {
    width: 60%;
  }

  .logo {
    font-size: 30px;
  }
  .navigation {
    display: flex;
    justify-content: space-between;
    align-items: center;
    list-style: none;
    width: 50%;
  }
  .login {

    input {

    }
  }
}
</style>